<template>
  <div class="app-container">
    <el-table :data="listData.list" v-loading.body="listLoading" element-loading-text="Loading" stripe border fit highlight-current-row>
      <el-table-column prop="id" label='ID' width="80"></el-table-column>
      <el-table-column prop="nickname" :label="$t('userTranslate.username')" width="160"></el-table-column>
      <el-table-column prop="role" :label="$t('userTranslate.role')" min-width="200">
        <template slot-scope="scope"><span>{{$t('updateUserTranslate.' + roleFilter(scope.row.role, roleData))}}</span></template>
      </el-table-column>
      <el-table-column prop="created_at" :label="$t('userTranslate.created')" width="200"></el-table-column>
      <el-table-column prop="updated_at" :label="$t('userTranslate.updated')" width="200"></el-table-column>
      <el-table-column :label="$t('userTranslate.action')" width="200" >
        <template slot-scope="scope">
          <div>
            <el-button type="text" size="small" v-if="$store.state.user.user_perms.includes('202')" @click="edit(scope.row)">[{{$t('userTranslate.edit')}}]</el-button>
            <el-button type="text" size="small" v-if="$store.state.user.user_perms.includes('204')" @click="remove(scope.row)">[{{$t('userTranslate.delete')}}]</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination  @size-change="handleSizeChange" @current-change="handleCurrentChange"
                      :current-page="q.$page" :page-sizes="$store.state.app.pageSizeArr"
                      :page-size="q.$size"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="listData.total_count">
      </el-pagination>
    </div>
    <update-user v-if="showUpdate" :showUpdate.sync="showUpdate" :userDetailId="userDetailId"></update-user>
  </div>
</template>

<script>
import updateUser from './updateUser';
import { getUserList, deleteUser } from '@/api/userdata';
import i18n from '@/lang/index';
import { getRoleList } from '@/api/role';

export default {
  components: { updateUser },
  data() {
    return {
      listData: {},
      q: { $size: 30, $page: 1 },
      listLoading: true,
      showUpdate: false,
      userDetailId: null,
      roleData: {}
    };
  },
  filters: {  
  },
  created() {
    this.getList();
  },
  deactivated() {
    this.listLoading = false;
  },
  methods: {
    roleFilter(role, staten) {
      //const roleArray = ['未激活/黑名单用户', '未使用1', '未使用2', '集团财务', '内部财务', '开发者']
      if (role > 0) {        
        return staten[role];
      } else {
        return '';
      } 
    },   
    edit(row) {
      this.showUpdate = true;
      this.userDetailId = row.id;
    },
    remove(row) {
      this.$confirm(
        `${i18n.t('userTranslate.delete_msg')}${row.id}${i18n.t(
          'userTranslate.delete_msg2'
        )}`,
        i18n.t('userTranslate.delete_title'),
        {
          confirmButtonText: i18n.t('userTranslate.confirm'),
          cancelButtonText: i18n.t('userTranslate.cancel'),
          type: 'warning'
        }
      )
        .then(() => {
          deleteUser(row.id).then(res => {
            if (res.status === 0) {
              this.$message({
                type: 'success',
                message: i18n.t('userTranslate.delete_success')
              });
              this.getList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: i18n.t('userTranslate.cancelled')
          });
        });
    },
    handleSizeChange(val) {
      this.q.$size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.q.$page = val;
      this.getList();
    },
    getList() {                
      let params = Object.assign(
        {
          $orderby: 'id'
        },
        this.q
      );
      this.listLoading = true;
      getUserList(params).then(res => {
        if (res.status === 0) {
          this.listLoading = false;
          this.listData = res.data;
        }
      });
      this.getRoleList();
    },
    getRoleList() {
      getRoleList().then(res => {
        if (res.status === 0) {
          let roleData = {};
          res.data.list.map(item => {
            roleData[item.id] = item.rolename;
          });
          this.roleData = roleData;
        }
      });
    }
  },
  watch: {
    showUpdate() {    
      if (!this.showUpdate) {
        this.getList();
      }
    }
  }
};

export const zhTransUser = {
  username: '昵称',
  role: '角色',
  created: '创造时间',
  updated: '更新时间',
  action: '操作',
  edit: '编辑',
  delete: '删除',
  delete_title: '删除商户',
  delete_msg: '确认删除ID为 ',
  delete_msg2: ' 为 的项么？',
  delete_success: '删除成功!',
  confirm: '确定',
  cancel: '取消',
  cancelled: '已取消删除',
  roles: {
    5: '超级管理员',
    26: '收付組長',
    27: '收款組員',
    28: '付款組員',
    29: '充值提單測試',
    30: '代理充值專員',
    31: '测试商户角色',
    32: '测试'
  }
};

export const enTransUser = {
  username: 'Username',
  role: 'Role',
  created: 'Created Time',
  updated: 'Updated Time',
  action: 'Actions',
  edit: 'edit',
  delete: 'delete',
  delete_title: 'Delete User',
  delete_msg: 'Are you sure to delete user ID ',
  delete_msg2: '?',
  delete_success: 'Successfully deleted!',
  confirm: 'Confirm',
  cancel: 'Cancel',
  roles: {
    5: 'Super Administrator',
    26: 'Receiving team leader',
    27: 'Collection member',
    28: 'Payment team member',
    29: 'Recharge bill of lading test',
    30: 'Agent recharge commissioner',
    31: 'Test merchant role',
    32: 'test'
  },
  cancelled: 'Delete cancelled.'
};
</script>
